<template>
	<view class="return-details">
		<popup-active :visible.sync="showHonor" :popScreenList="popScreenList" @toPage="toPage"></popup-active>
		<rich-text class="main-wrapper" :nodes="originalContent"></rich-text>
		<view style="display: flex;justify-content: space-around;height: 68rpx;">
			<view class="warn" :class="{ gray: isGray }" v-if="this.isIOS == 'ios'" @click="wran()">
				<image src="https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/jubao.png"></image>
			</view>

			<view class="care" @click.stop="careHeHuoRen()">
				<image :src="`//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/heart_${likeType == 1 ? 'fill' : 'black'}.png`" alt="" />
				<text class="font24 color8a8c8d fr paddingR16">{{ giveLikeNum || 0 }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import http from '../../common/request.js';
import popupActive from '@/components/popup-activity/popup-activity.vue';
import {getCommonShareInfo} from '@/common/utils.js'
export default {
	onShareAppMessage() {
		return getCommonShareInfo()
	},
	onLoad: function(option) {
		const { contentId, likeType, giveLikeNum } = option;
		this.contentId = contentId;
		this.likeType = likeType;
		this.giveLikeNum = giveLikeNum;
		this.eventChannel = this.getOpenerEventChannel();
	},
	components: { popupActive },
	data() {
		return {
			contentId: '',
			likeType: '',
			giveLikeNum: 0,
			originalContent: '',
			popScreenList: [],
			showHonor: false,
			info: '',
			isIOS: '',
			isGray: true
		};
	},
	mounted() {
		this.getData();
		this.info = uni.getSystemInfoSync();
		this.isIOS = this.info.platform;
	},
	methods: {
		wran() {
			this.isGray = false;
			uni.showToast({
				title: '举报成功',
				duration: 2000,
				icon: 'none'
			});
		},
		getData() {
			const info = uni.getSystemInfoSync();
			http('/api/sysContentInfo/detail/' + this.contentId, { method: 'GET' }).then(result => {
				if (result.code == 200) {
					const html = (result.data || {}).originalContent;
					this.originalContent = '<div style="padding: 0 '+ 40 / (750 / info.windowWidth) +'px!important;color: #66645d;">'+ html +'</div>';
					this.giveLikeNum = result.data.giveLikeNum;
					this.likeType = result.data.likeType;
				}
			});
		},
		careHeHuoRen() {
			let url = 'api/sysContentLike/dataIncr';
			if (this.likeType === 1) {
				url = 'api/sysContentLike/dataDecr';
			}
			http(url, {
				method: 'POST',
				data: {
					contentId: this.contentId
				}
			}).then(result => {
				if (result.code == 200) {
					const data = result.data || {};
					const {count = 0, likeType} = data;
					this.giveLikeNum = count;
					this.likeType = likeType;
					this.eventChannel.emit('updateList', {count, likeType})
					if (this.likeType === 1) {
						if (data.popScreen.length > 0) {
							this.showHonor = true;
							this.popScreenList = data.popScreen;
						}
					}
				}
			});
		}
	}
};
</script>

<style scoped lang="less">
.return-details {
	background-color: #fff;
	position: relative;
	background: #fff;
	.main-wrapper {
		margin: 0 40rpx;
		width: calc(100% - 80rpx);
		color: #66645d;
		.mainText {
			line-height: 50rpx;
		}
		.bottomText {
			margin-top: 30rpx;
			padding-bottom: 20rpx;
			line-height: 50rpx;
			border-bottom: 1px solid #ccc;
		}
		.itemImg {
			width: 670rpx;
			height: 210rpx;
			border: 1px solid;
			margin: 30rpx 0 30rpx 0;
			img {
				width: 100%;
				max-height: 100%;
			}
		}
		.titpText {
			margin-top: 20rpx;
			padding-bottom: 220rpx;
			padding-right: 10rpx;
			img {
				width: 30rpx;
				margin-right: 5rpx;
				vertical-align: bottom;
			}
		}
	}
}
.diaryText {
	margin: 30px;
	min-height: 160rpx;
	color: rgba(102, 100, 93, 1);
}
.care {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 20rpx;
	image {
		width: 28rpx;
		height: 26rpx;
		margin-right: 12rpx;
	}
}
.warn {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 20rpx;
	&.gray {
		filter: grayscale(1);
	}
	image {
		width: 30rpx;
		height: 30rpx;
	}
}
</style>
